<template>
  <div>
    <!-- tabbar组件 -->
    <div class="tabber">
      <!-- 四个tabber-item -->
      <div class="tabber-item" @click="toTab(0)" :class="[activeIndex === 0 ? 'active' :'']">
        <i class="iconfont icon-shangpin-xianxing"></i>
        <h3>首页</h3>
      </div>
      <div class="tabber-item" @click="toTab(1)" :class="[activeIndex === 1 ? 'active' :'']">
        <i class="iconfont icon-viewlist"></i>
        <h3>分类</h3>
      </div>
      <div class="tabber-item" @click="toTab(2)" :class="[activeIndex === 2 ? 'active' :'']">
        <i class="iconfont icon-caigou-xianxing"></i>
        <h3>购物车</h3>
      </div>
      <div class="tabber-item" @click="toTab(3)" :class="[activeIndex === 3 ? 'active' :'']">
        <i class="iconfont icon-account"></i>
        <h3>我的</h3>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //  激活的路由id
      activeIndex: 0,
      // 激活的路由表
      activePath: ['index', 'cate', 'cart', 'profile']
    }
  },
  // 导入的自定义组件
  components: {},
  // 组件创建的钩子函数
  // created: {},
  // 租价内使用的方法
  methods: {
    toTab (i) {
      this.activeIndex = i
      const path = this.activePath[i]
      this.$router.push(path).catch(err => {
        console.log('错误', err)
      })
    }
  }

}
</script>

<style lang="less" scoped>
  .tabber {
    position: absolute;
    width: 100%;
    bottom: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    background: #f1f1f1;
    padding-top: 5px;
    >.tabber-item {
      align-self: center;
      text-align: center;
      >.iconfont {
        font-size: 30px;
      }
    }
    >.active {
      color: rgb(255, 0, 54);
    }
  }
</style>
